<include file="public@header"/>
<link rel="stylesheet" href="__STATIC__/js/element/css/element.css">
<style>
    [v-cloak] {
        display: none !important;
    }
    .avatar-uploader .el-upload {
        background-color: #fff;
        cursor: pointer;
        position: relative;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 130px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 130px;
        height: 120px;
        display: block;
    }
    input[type="file"] {
        display: none !important;
    }


</style>
</head>
<body>

<div class="wrap js-check-wrap" id="app" v-cloak>


    <el-upload
            class="upload-demo"
            :action="upload_path"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>


    {{avatar}}


</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="__STATIC__/js/element/js/element.js"></script>


<script type="text/javascript">

    let app = new Vue({
        el: '#app',
        data: {
            upload_path:GV.ROOT + 'user/Asset/webuploader_img',
            imageUrl: '',
            avatar:''
        },
        created: function () {

        },
        methods: {
            handleAvatarSuccess(res, file) {
                if(res.code == 200){
                    this.avatar = res.data.filepath
                }
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isLt2M;
            },
        }

    })
</script>


</body>
</html>